<template>
    <div class="app-container">
        <el-form label-position="right" :model="formLabelAlign" ref="ruleFormRef">
            <el-card style="margin-bottom: 20px;" class="box-card">
                <el-descriptions title="年终奖信息" :column="4" direction="vertical" border>
                    <el-descriptions-item label="姓名">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '姓名不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="name">
                            <el-input disabled :readonly="true" v-model="formLabelAlign.name" placeholder="姓名" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="工号">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '工号不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="jobNumber">
                            <el-input disabled v-model="formLabelAlign.jobNumber" placeholder="工号" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="年份">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '年份不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="jobNumber">
                            <el-input disabled v-model="formLabelAlign.year" placeholder="年份" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="银行卡号">
                        <el-form-item prop="bankCard">
                            <el-input disabled v-model="formLabelAlign.bankCard" placeholder="银行卡号" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="月工资">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '月工资不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="jobNumber">
                            <el-input disabled v-model="formLabelAlign.basicSalary" placeholder="年份" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="绩效系数">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '绩效系数不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="performanceCoefficient">
                            <el-input disabled v-model="formLabelAlign.performanceCoefficient" placeholder="绩效系数" />
                        </el-form-item>
                    </el-descriptions-item>

                    <el-descriptions-item label="年终奖">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '年终奖不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="yearEndBonus">
                            <el-input disabled v-model="formLabelAlign.yearEndBonus" placeholder="年终奖" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="发放总额">
                        <el-form-item prop="actualPay">
                            <el-input disabled v-model="formLabelAlign.actualPay" placeholder="发放总额" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="个税">
                        <el-form-item prop="tax">
                            <el-input disabled v-model="formLabelAlign.tax" placeholder="个税" />
                        </el-form-item>
                    </el-descriptions-item>

                    <el-descriptions-item label="实发数">
                        <el-form-item prop="payed">
                            <el-input disabled v-model="formLabelAlign.payed" placeholder="payed" />
                        </el-form-item>
                    </el-descriptions-item>

                    <el-descriptions-item v-for="item of postStaffDeductionList" :label="item.name">
                        <el-form-item prop="payed">
                            <el-input disabled v-model="item.amount" placeholder="payed" />
                        </el-form-item>
                    </el-descriptions-item>

                    <!-- <el-descriptions-item label="备注">
                        <el-form-item prop="remark">
                            <el-input type="textarea" v-model="formLabelAlign.remark" placeholder="备注" />
                        </el-form-item>
                    </el-descriptions-item> -->
                </el-descriptions>
            </el-card>
            <el-form-item>
                <el-button @click="closeTag()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: "yearEndBonusListEdit"
}
</script>
<script setup>
import { postyearEndBonusInfo, yearEndBonusUpdate, postStaffDeduction } from '@/api/api';
import useCloseTag from '@/hooks/useCloseTag'
import { parseTime } from '@/utils';
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref, watch, computed } from 'vue'
import { useRoute } from 'vue-router';
const activeName = ref('first')
const ruleFormRef = ref()
const { closeTag } = useCloseTag()

const formLabelAlign = reactive({
    id: 0,
    account: "",
    password: "",
    jobNumber: "",
    name: "",
    mobile: "",
    jobAttributes: "",
    department: "",
    job: "",
    position: "",
    entryTime: "",
    leaveTime: "",
    level: "",
    isLeave: false,
    basicSalary: '',
    taxPayer: 1,
    deduction: '',
    idCard: "",
    payee: "",
    bankCard: "",
    bankName: "",
    gjjh: "",
    remark: "",
    eductionList: []
})

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            await yearEndBonusUpdate({
                ...formLabelAlign,
            })
            ElMessage.success('保存成功！')

        } else {
            console.info(fields)
            ElMessage.error('请查看您填写的参数是否正确！')

        }
    })

}


if (useRoute().query.id) {
    formLabelAlign.id = useRoute().query.id
    listFn()
} else {

}
const postStaffDeductionList = ref([])
async function postStaffDeductionFn() {
    let { data } = await postStaffDeduction({
        year: formLabelAlign.year,
        jobNumber: formLabelAlign.jobNumber,
        status: [9],
    })
    postStaffDeductionList.value = data
}
async function listFn() {
    let { data: list } = await postyearEndBonusInfo({
        id: formLabelAlign.id,
    })
    // list.eductionList = list.staffDeduction
    Object.assign(formLabelAlign, list)
    postStaffDeductionFn()
}
</script>

<style></style>
